<template>
	<view class="applyWithdrawal">
		<view class="imageBackground flex-column" :style="{ '--bg-image': `url(${tixian})` }">
			<view class="text-align_center commission">
				<view style="color: rgb(255, 255, 255);">
					我的收益
				</view>
				<view style="color: rgb(255, 255, 255);font-size: 60rpx;margin: 20rpx 0;" v-if="brokerageIndex">
					{{brokerageIndex.brokerage?brokerageIndex.brokerage:'0.00'}}
				</view>
			</view>
			<view class="dataDetail">
				<view class="" v-if="brokerageSet.cash_open==1">
					提现记录
				</view>
				<view class="flex-between " style="margin: 30rpx 0;">
					<view class="flex-align-center">
						<text class="font32">￥</text>
						<input style="font-size: 46rpx;" placeholder-style="font-size:32rpx;" type="number"
							v-model="allCommission" placeholder="输入金额" />
						<!-- <text style="font-size: 56rpx;">{{allCommission}}</text> -->

					</view>
					<!-- <view class="flex-align-center v-price">
						<text>￥</text>
						<input type="number" v-model="logno" placeholder="输入金额" />
						<view @click="allGET()">全部提现</view>
					</view> -->
					<view v-if="Number(brokerageIndex.brokerage)>=0&&brokerageSet.cash_open==1"
						class="withdrawalBtn flex" @click="allWithdrawals()">
						全部提现
					</view>

				</view>
				<view class="flex-between" v-if="brokerageSet.cash_open==1">

					<view style="color: rgb(153, 153, 153);" v-if="brokerageSet">
						<text style="color: red;font-size: 22rpx;">手续费{{brokerageSet.service_charge}}%</text><text
							style="font-size: 22rpx;">，实际到账{{(allCommission-((Math.ceil(Number(brokerageSet.service_charge))?Math.ceil(Number(brokerageSet.service_charge)):0)* allCommission )/100).toFixed(2)}}，预计1-7个工作日审核完成</text>
					</view>
				</view>

			</view>
			<view class="withdrawalType flex-between" v-if="cash_typeList.length&&brokerageSet.cash_open==1">

				<view class="flex" v-for="(item, index) in payList" :key="item.value">
					<image class="imgWxx" :src="item.image" mode=""></image>
					<text class="font-weight_bold margin-left_16rpx">{{item.name}}</text>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd">
							<view>
								<radio style="transform:scale(0.7);color: ;" color="#0095FF" :value="item.value"
									:checked="index == current" :disabled="item.disabled" />
							</view>

						</label>
					</radio-group>
				</view>
				<!-- 	<view class="flex">
					<image class="imgWxx" :src="zfb" mode=""></image>
					<text class="font-weight_bold margin-left_16rpx">提现到支付宝</text>
				</view> -->

			</view>
			<view class="zfbCard flex-column-between-start" v-if="form.cash_type!=2&&cash_typeList[0]==1">
				<view class="account-cls padding30 flex-align-center">
					<view class="width100">账户姓名</view>
					<input placeholder="请输入账户姓名" v-model="form.nickname" />
				</view>
				<view class="border">

				</view>
				<view class="account-cls padding30 flex-align-center">
					<view class="width100">支付宝号码</view>
					<input type="number" placeholder="请输入支付宝号码" v-model="form.telphone" />
				</view>
			</view>

			<view class="withdrawalNowBtn flex" @click="withdrawalNowFn()"
				v-if="cash_typeList.length&&brokerageSet.cash_open==1">
				立即提交
			</view>


		</view>
		<view class="v-title flex-start-center margin-top_60rpx">
			<text></text>
			<view>申请说明</view>
		</view>
		<view v-if="brokerageSet.commission" style="margin: 0 20rpx;">
			<uv-parse class="" :content="brokerageSet.commission" :selectable="true"></uv-parse>
		</view>
	</view>

	</view>
</template>

<script>
	import antiThrottling from '@/utils/antiThrottling.js';
	export default {
		components: {

		},
		data() {
			return {

				current: 0,
				tabIndex: 4,
				accountInfo: {
					accountName: '',
					accountNumber: '',

				},
				brokerageIndex: uni.getStorageSync('brokerageIndex'),
				brokerageSet: uni.getStorageSync('brokerageSet'),
				tixian: this.$imgs.applyWithdrawalBg,
				currency_name: '11',
				userInfos: {},
				// 用户配置
				userInfo: null,
				// 基本配置
				basicConfiguration: {},

				// 全部佣金
				allCommission: '',
				// 最多提现额度

				withdrawal_condition: '',
				// 最低提现额度
				everyday_withdrawal_amount: '',
				//" 1 支付宝 2 微信  3 支付宝和微信"
				withdrawal_mode: '',
				deduction_integral_ratio: 0,
				// wx zfb
				payList: [{
					value: '1',
					name: '提现到支付宝',
					checked: 'true',
					disabled: false,
					image: '/static/zfb.png',

				}, {
					value: '2',
					name: '提现到微信 ',
					image: '/static/wx2.png',
					disabled: false,
					checked: 'false',
				}, ],
				cash_typeList: [],
				form: {
					// 申请金额
					commission_wait: '',
					//  1支付宝' 2 微信,
					cash_type: 1,
					uid: uni.getStorageSync('uid'),
					nickname: '',
					telphone: '',

				}
			}
		},
		onLoad() {
           
			let arr = uni.getStorageSync('brokerageSet').cash_type.split(",").map(Number); // 使用 map 转换为数字数组

			// 如果数组只有一个元素且是空字符串，则返回包含该元素的数组
			if (arr.length === 1 && arr[0] === "") {
				arr = [];
			}
			console.log(arr)
			this.cash_typeList = arr
			if (this.cash_typeList.length) {
				if (this.cash_typeList.length != 2) {

					if (this.cash_typeList[0] == 1) {
						this.form.cash_type = 1
						this.payList = [{
							value: '1',
							name: '提现到支付宝',
							checked: 'true',
							disabled: false,
							image: '/static/zfb.png',
						}]
					} else {
						this.form.cash_type = 2
						this.payList = [{
							value: '2',
							name: '提现到微信 ',
							image: '/static/wx2.png',

							disabled: false,
							checked: 'true',
						}]
					}
				}
			}
		},
		onShow() {
			this.brokerageSetFn()
			antiThrottling.releaseKey('submit');

		},
		methods: {
			
			async templateTpo() {

				wx.requestSubscribeMessage({
					tmplIds: [uni.getStorageSync("templateSet").withdraw_apply_template, uni.getStorageSync(
						"templateSet").withdraw_result_template],
					success: res => { //成功、
						if (res[Object.keys(res)[0]] == "accept") {
							console.log(res)
							// this.$sun.toast("成功订阅")
						} else {
							uni.showModal({
								title: "温馨提示",
								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
							})
						}
					},
					fail: err => { //失败
						this.$sun.toast("订阅消息配置失败");
					}
				})

			},
			radioChange(e) {
				console.log(e.detail.value)
				if (e.detail.value == 1) {
					this.form.nickname = ''
					this.form.telphone = ''
				}
				this.current = Number(e.detail.value) - 1
				this.form.cash_type = Number(e.detail.value)
			},
			// 申请提现
			withdrawalNowFn() {
				this.templateTpo()
				antiThrottling.uniDoFunc({
					key: 'submit',
					success: async () => {
						antiThrottling.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						this.form.commission_wait = this.allCommission
						if (!this.form.nickname && this.form.cash_type == 1) {
							this.$sun.toast("请输入姓名", 'none')
							antiThrottling.releaseKey('submit');
						} else if (!this.form.telphone && this.form.cash_type == 1) {
							this.$sun.toast("请输入账号", 'none')
							antiThrottling.releaseKey('submit');
						} else if (!this.form.commission_wait || this.form.commission_wait == '0.00') {
							this.$sun.toast('请填写金额', 'none')
							antiThrottling.releaseKey('submit');
						} else {
							if (this.form.commission_wait > Number(this.brokerageSet
									.cash_highest)) {
								this.$sun.toast('已到提现最高金额请联系管理员', 'none')
								antiThrottling.releaseKey('submit');
							} else if (this.form.commission_wait < Number(this.brokerageSet
									.cash_limit)) {
								this.$sun.toast('最低提现金额不得低于' + Number(this.brokerageSet
									.cash_limit), 'none')
								antiThrottling.releaseKey('submit');
							} else {

								console.log(this.form)
								antiThrottling.releaseKey('submit');
								console.log((this.form))
								const res = await this.$http.post({
									url: this.$api.cashwait,
									data: {

										...this.form
									},


								})
								console.log(res)
								if (res.errno == 0) {
									// 跳转到登录页面
									this.$sun.toast(res.message, 'none')
									setTimeout(() => {
										this.brokerageSetFn()
										this.brokerageIndexFn()
										this.allCommission = ''
										this.form.commission_wait = ''
										antiThrottling.releaseKey('submit');
									}, 500)


								} else {
									antiThrottling.releaseKey('submit');
									this.$sun.toast(res.message, 'none')
								}
							}

						}


					}
				});
			},
			async brokerageSetFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageSet,
					data: {


					}
				});
				if (result.errno == 0) {



					this.brokerageSet = result.data
					uni.setStorageSync('brokerageSet', result.data);
				}
			},
			async brokerageIndexFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageIndex,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {



					this.brokerageIndex = result.data
					uni.setStorageSync('brokerageIndex', result.data);
				}
			},
			allWithdrawals() {
				this.deduction_integral_ratio = Math.floor((this.brokerageIndex.brokerage / this.brokerageSet
						.service_charge) *
					100) / 100;
				this.allCommission = this.deduction_integral_ratio
				this.form.commission_wait = this.brokerageIndex.brokerage
			},
			// 获取用户信息
			async userInformation() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {




					},
					headers: {
						'Authorization': this.userInfos.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.userInfo = result.data


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			// 获取基本配置
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfos.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data

					// payList: [{
					// 	value: '1',
					// 	name: '提现到微信',
					// 	checked: 'true',
					// 	disabled: false,
					// 	image: this.$img.wxicom
					// }, {
					// 	value: '2',
					// 	name: '提现到支付宝',
					// 	image: this.$img.zfb,
					// 	disabled: false,
					// 	checked: 'false',
					// },],
					// 判断当前 是否可以使用那个进行申请
					if (result.data.withdrawal_mode == '2') {
						// this.payList[1].disabled = true
						this.current = 0
						this.form.cash_type = 2
						this.payList = [{
							value: '1',
							name: '提现到微信',
							checked: 'true',
							disabled: false,
							// image: this.$img.wxicom
						}]

					} else if (result.data.withdrawal_mode == '1') {
						// this.payList[0].disabled = true
						this.current = 0
						this.form.cash_type = 1
						this.payList = [{
							value: '2',
							name: '提现到支付宝',
							// image: this.$img.zfb,
							disabled: false,
							checked: 'true',
						}]
						// this.payList[0].checked = true
					}
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.v-title {
		padding: 0rpx 26rpx 15rpx;

		text {
			width: 10rpx;
			height: 24rpx;
			border-radius: 138rpx;

			background: linear-gradient(100.41deg, #1593ff 2.1%, #0294ed 99.742%);
		}

		view {
			margin-left: 10rpx;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.imageBackground {

		background-repeat: no-repeat;
		background-size: contain;
		background-image: (var(--bg-image));

		.commission {
			margin-top: 190rpx;
		}

		.dataDetail {
			margin-top: 26rpx;
			width: 700rpx;
			// height: 264rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			background: rgb(255, 255, 255);

			.withdrawalBtn {
				width: 140rpx;
				height: 64rpx;

				font-size: 24rpx;
				border-radius: 42rpx;
				background: linear-gradient(90.00deg, rgb(21, 149, 255), rgb(27, 136, 255) 100%);
				color: rgb(255, 255, 255);
			}
		}

		.withdrawalType {
			margin-top: 40rpx;
			border-radius: 20rpx;
			width: 700rpx;
			height: 114rpx;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
			background: rgb(255, 255, 255);
			padding: 28rpx 20rpx;

			.imgWxx {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.withdrawalNowBtn {
			margin-top: 96rpx;
			width: 566rpx;
			height: 96rpx;
			border-radius: 64rpx;


			border-radius: 64rpx;

			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 158, 148, 0.32), 0rpx 8rpx 8rpx 0rpx rgba(57, 92, 249, 0.2);
			background: linear-gradient(100.41deg, rgb(21, 147, 255) 2.1%, rgb(2, 148, 237) 99.742%);
			font-size: 32rpx;
			color: rgb(255, 255, 255);
		}

		.zfbCard {
			margin-top: 40rpx;
			width: 700rpx;
			height: 298rpx;
			border-radius: 20rpx;

			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			background: rgb(255, 255, 255);
			padding: 16rpx;

			.border {
				border: 1rpx solid rgb(248, 248, 248);
				width: 651rpx;
				height: 0;
			}
		}
	}
</style>